<script setup>
import SectorBox from "@/components/SectorBox.vue";
import useSector from "@/api/sector/useSector.js";
import {onMounted,ref} from "vue";

const sector = useSector()
let sectorList = ref([])

sector().then(res => {
      const data = res.data.data
      data.forEach(item => {
        sectorList.value.push({
          name:item.planSectorName,
          count:item.count
        })
      })
  }).then(() => {
    console.log("获取扇区数据",sectorList.value)
})


</script>

<template>
<div class="sector-box">
  <SectorBox class="item" v-for="i in sectorList" :key="i" :item="i"></SectorBox>
</div>
</template>

<style scoped>
.sector-box .item{
  width: 15%;
  height: 100%
}

.sector-box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  padding: 5px;
  border-radius: 10px;
}
</style>